<template>
  <div class="order_list">
    <!-- 标题 -->
    <div style="position:sticky;top:0;z-index:1000;"><van-nav-bar title="订单"></van-nav-bar></div>
      <div v-for="list in orders.list" :key="list.id">
        <div style="backgroundColor:white;margin:.5em;border-bottom:1px;padding:1em 0">
          <div style="font-size:18px">
            <span @click="toOrdersDetails(list.id)" style="font-weight:bold;">&nbsp;&nbsp;订单编号：{{list.id}}</span>
            <span style="float:right;color:red">{{list.status}}&nbsp;</span>
          </div>
          <!-- <div style="text-align:right">{{moment(list.orderTime).format('YYYY-MM-DD hh:mm') }}</div> -->
          <div style="margin:.5em 0">
            <van-card v-for="o in list.orderLines" :key="o.id"
              :num="o.num"
              :price="o.price"
              :title="o.name"
              :thumb="o.photo"
            >
            </van-card>
          </div>
          <div style="line-height:2em;margin: 0 1em" v-if="list.buyerMessage">
            备注：{{list.buyerMessage}}
          </div>
          <div style="line-height:2em;margin: 0 1em;">
            总价：<span style="color:red">{{list.total}}元</span>
            <van-button @click="payHandler(list)" v-if="list.status=='待支付'" style="float:right" size="mini" type="success">去支付</van-button>
            <!-- <van-button v-else style="float:right" size="mini" type="success"></van-button> -->
          </div>
        </div>
      </div>
      <van-overlay :show="show">
        <div class="wrapper">
          <div class="block">
            <div>
              <van-icon @click="show=false" name="cross" size="20" color="rgb(188,188,188)" />
              <div class="usePassword">使用密码</div>
            </div>
            <div>
              <div>付款给商家</div>
              <div>￥ {{payData.total}}</div>
            </div>
            <div>
              <span>支付方式</span>
              <div>零钱<van-icon name="arrow" /></div>
            </div>
            <div class="confirmPay"><van-button @click="confirmPay(payData.id)" type="success" block>确认支付</van-button></div>
          </div>
        </div>
      </van-overlay>
  </div>
</template>
<script>
import { ref,computed,onMounted } from 'vue'
import { get } from '../../utils/request'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import moment from 'moment'
import { Toast } from 'vant'
export default {
  setup(){
    let store = useStore();  // 使用状态机
    let router = useRouter();  // 使用路由
    let orders = ref([]);  // 订单列表
    let show = ref(false);  // 控制遮罩层
    let payData = ref({});  // 支付数据
    let payPassword = ref();  // 支付密码
    let user_info = computed(()=>store.state.user.user_info);  // 状态机获取用户信息
    // 加载订单列表数据
    let loadOrders = async ()=>{
      let resp = await get('/app/order/pageQuery',{page:1,pageSize:100,customerId:user_info.value.id});
      orders.value = resp.data;
    }
    // 去支付操作函数
    let payHandler = (list)=>{
      show.value = true;
      payData.value = list;
    }
    // 确认支付操作函数
    let confirmPay = (id)=>{
      get('/app/order/pay',{id});
      show.value = false;
      Toast.success('支付成功');
      setTimeout(()=>{
        loadOrders();
      },1000);
    }
    // 点击订单编号跳转到订单详情页面
    let toOrdersDetails = (id)=>{
      router.push({path:'/home/details',query:{id}});
    }
    onMounted(async ()=>{
      await loadOrders();
    })
    return {
      orders,
      moment,
      show,
      payData,
      payPassword,
      payHandler,
      confirmPay,
      toOrdersDetails
    }
  }
}
</script>
<style lang="scss" scoped>
.order_list{
   .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 70%;
      height: 260px;
      background-color: #fff;
      padding: 1em;
      border-radius: 5px;
      &>div:nth-child(2){
        border-bottom: 1px solid rgb(231, 198, 198);
        text-align: center;
        padding: 2em 0;
        &>div:first-child{
          font-size: 16px;
          color: #000;
        }
        &>div:last-child{
          font-size: 32px;
          font-weight: bold;
        }
      }
      &>div:nth-child(3){
        margin: 1em 0;
        color: rgb(177,177,177);
        &>div:last-child{
          float: right;
        }
      }
      .confirmPay{
        width: 60%;
        margin: 2em auto;
      }
      .usePassword{
        color: rgb(89, 112, 141);
        font-size: 16px;
        line-height: 1.5em;
        float: right;
      }
    }
  }
}
</style>